<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
    <link rel="stylesheet" href="../css/mescroll.min.css">
    <style type="text/css">
        /*mescroll滚动的区域*/
        .mescroll {
            position: fixed;
            top: 94px;
            bottom: 0;
            height: auto;
        }
    </style>
</head>
<body class="bg_fe">
<div id="vue-box" v-cloak>
    <header><a class="icon_back"></a>订单列表</header>
    <div class="head_height"></div>
    <div class="container order-c order_list">
        <div class="tab-active">
            <div class="item js-toggleStatus" data-id="0">全部</div>
            <div class="item js-toggleStatus" data-id="1">待付款</div>
            <div class="item js-toggleStatus" data-id="2">待拍摄</div>
            <div class="item js-toggleStatus" data-id="3">已完成</div>
            <!--<div class="item js-toggleStatus" data-id="5">退款中</div>-->
        </div>
        <!--滑动区域-->
        <div id="mescroll" class="mescroll">
            <div class="data-list">
                <div class="li" v-for="item in pageList" @click="goOrderDetail(item.id)">
                    <div class="png"><img :src="imgBaseurl + item.storeImg" alt=""></div>
                    <div class="content font-14">
                        <div class="text-1 font-16">
                            <span>{{item.storeName}}</span>
                            <span class="status">{{item.state | status}}</span>
                        </div>
                        <div class="text-2">{{item.goodName}}</div>
                        <div class="text-3">
                            总价：<span>￥{{item.totalPay}}</span>
                            <span class="btn-m js-getmoney" v-show="item.state==1?true:false" @click.stop="pay(item.id)">付款</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/config.js"></script>
<script src="../js/mescroll.min.js"></script>
<script>
    var sendData = {
        state: getUrlParam('state'),
        limit: '',
        page: '',
        token: token,
    }

    $(document).find('.js-toggleStatus').each(function(){
        if($(this).attr('data-id')==sendData.state){
            $(this).addClass('act');
            return false;
        }

    })

    var app = new Vue({
        el: '#vue-box',
        data: {
            mescroll: null,
            pageList: [],
            imgBaseurl:imgBaseurl,
        },
        mounted: function () {
            var self = this;
            self.mescroll = new MeScroll("mescroll", {
                up: {
                    callback: self.upCallback, //上拉回调
                    page: {size: 6}, //可配置每页8条数据,默认10
                    empty: { //配置列表无任何数据的提示
                        warpId: "vue-box",
                        tip: "亲,暂无相关数据哦~",
//
                    },
                    lazyLoad: {
                        use: true // 是否开启懒加载,默认false
                    }
                }
            });
        },
        methods: {
            upCallback: function (page) {
                var self = this;
                getListDataFromNet(page.num, page.size, function (curPageData, totalPage) {
                    if (page.num == 1) self.pageList = [];
                    self.pageList = self.pageList.concat(curPageData);
                    console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length + ", self.pageList.length==" + self.pageList.length);
                    self.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
                }, function () {
                    self.mescroll.endErr();
                });
            },
            goOrderDetail:function(id){
                window.location.href='order-detail.html?orderId='+id;
            },
            pay:function (id) {
                location.href = 'order_pay.html?orderId='+id+'&state=1'
            }
        },
        filters: {
            status: function (value) {
                if(value==1){
                    return value = '待付款'
                }else if(value==-1){
                    return value = '已取消'
                }else if(value==2){
                    return value = '待拍摄'
                }else if(value==3){
                    return value = '交易完成'
                }else if(value==4){
                    return value = '已评价'
                }else if(value==5){
                    return value = '退款中'
                }else if(value==6){
                    return value = '退款成功'
                }else if(value==7){
                    return value = '退款失败'
                }

            }
        }
    })
    function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
        sendData.limit = pageSize;
        sendData.page = pageNum;
        get_ajax("order/getOrderList", sendData, function (data) {
            var data = data.list;
            var tolPag = 10000;
            var listData = data
//                listData = [];
            successCallback && successCallback(listData, tolPag);//成功回调
        });
    }

    //刷选更新数据
    function searchData(){
        sendData.page = 1;
        get_ajax("order/getOrderList", sendData, function (data) {
            app.pageList = data.list;
        });
    }

    $(document).on('click','.js-toggleStatus',function(){
        $(this).addClass('act').siblings().removeClass('act');

        sendData.state = $(this).attr('data-id');
        searchData();
    })
</script>

</html>